<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="/assets/lib/layui/css/layui.css"
    />
    <link
      rel="stylesheet"
      href="/assets/css/article/art_list.css"
    />
    <script src="/assets/lib/template-web.js"></script>
  </head>
  <body>
    <!-- 卡片区域 -->
    <div class="layui-card">
      <div class="layui-card-header">文章列表</div>

      <div class="layui-card-body">
        <!-- 筛选区域 -->
        <form
          class="layui-form"
          id="form-search"
        >
          <div class="layui-form-item layui-inline">
            <select
              name="cate_id"
              id="cateId"
            >
              <script
                type="text/html"
                id="tpl-cates"
              >
                <option>所有分类</option>
                {{each data}}
                <option value="{{$value.Id}}">{{$value.name}}</option>
                {{/each}}
              </script>
            </select>
          </div>
          <div class="layui-form-item layui-inline">
            <select
              name="state"
              id="state"
            >
              <option value="">所有状态</option>
              <option value="已发布">已发布</option>
              <option value="草稿">草稿</option>
            </select>
          </div>
          <div class="layui-form-item layui-inline">
            <button
              class="layui-btn"
              lay-submit
              lay-filter="formDemo"
            >
              筛选
            </button>
          </div>
        </form>
        <!-- 列表区域 -->
        <table class="layui-table">
          <colgroup>
            <col />
            <col width="150" />
            <col width="180" />
            <col width="150" />
            <col width="150" />
          </colgroup>
          <thead>
            <tr>
              <th>文章标题</th>
              <th>分类</th>
              <th>发表时间</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <script
              type="text/html"
              id="tpl-table"
            >
              {{each data}}
              <tr>
                <td>{{$value.title}}</td>
                <td>{{$value.cate_name}}</td>
                <td>{{$value.pub_date|dateFormat}}</td>
                <td>{{$value.state}}</td>
                <td>
                  <button
                    type="button"
                    class="layui-btn layui-btn-xs"
                  >
                    编辑
                  </button>
                  <button
                    type="button"
                    class="layui-btn layui-btn-xs layui-btn-danger btn-delete"
                    data-id="{{$value.Id}}"
                  >
                    删除
                  </button>
                </td>
              </tr>
              {{/each}}
            </script>
          </tbody>
        </table>

        <div id="pageBox"></div>
      </div>
    </div>
    <!-- 导入第三方的 JS 插件 -->
    <script src="/assets/lib/layui/layui.all.js"></script>
    <script src="/assets/lib/jquery.js"></script>
    <script src="/assets/js/baseAPI.js"></script>
    <!-- 导入自己的 JS 脚本 -->
    <script src="/assets/js/article/art_list.js"></script>
    <!-- 渲染页面的模板 -->
  </body>
</html>
